<template>
  <div :class="{bg:flag,bigger:bigger}">
    <span class="red" :style="{width:data[0]+'%'}"></span>
      <span class="orange" :style="{width:data[1]+'%'}"></span>
      <span class="yellow" :style="{width:data[2]+'%'}"></span>
      <span class="green" :style="{width:data[3]+'%'}"></span>
      <span class="blue" :style="{width:data[4]+'%'}"></span>
      <span class="white" :style="{width:data[5]+'%'}"></span>
      <span class="gray" :style="{width:data[6]+'%'}"></span>
  </div>

</template>
<script>
export default {
  props: [
    'data',
    'bigger'

  ],
  data () {
    return {
      flag: true
    }
  }
}
</script>
<style scoped>
  .bg{
    border-radius: 13px;
    overflow: hidden;
    width: 85px;
    font-size: 0;
    line-height: 0;
    border: 1px solid #eeeeee;
    /* background: url("http://gamer.qq.com/images/firdatebase/datebase-pro-bg.gif") */
  }
  span{
    height: 6px;
    display: inline-block;
    width: 20px;
  }
  .bigger{
    width: 80%;
  }
  .bigger span{
    height: 12px;
  }

</style>
